<template>

  <div class="wapper">
    <div
      class="nav-view"
      :class="navMobail"
      :style="isShowDrawer ? 'left:0;' : 'left:-200px;'">
      <nav-view :collapse="!isCollapse"></nav-view>
    </div>
    
    <div 
      v-if="isShowDrawer" 
      class="drawer-bg" 
      @click="showMenu">
    </div>

    <div class="aside-view">
      <div class="header-view">
        <el-button
          type="text" 
          :icon="btn_icon" 
          size="medium"
          @click="showMenu"
          style="color:#9ddfd3">
        </el-button>
      </div>
      <div class="main-view">
        <!-- <div class="main-body"></div> -->
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>aaaaaaaa</p>
        <p>@@@@@@@@@@@@@@@@@@@</p>
      </div>
    </div>

  </div>
    
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import {
  ElContainer,
  ElHeader,
  ElMain,
  ElFooter,
  ElButton,
  ElIcon
} from 'element-plus';
import NavView from '../components/nav_view/NavView.vue';
import { throttle } from '../tools/utils';

export default defineComponent({
  components: { 
    ElContainer,
    ElHeader,
    ElMain,
    ElFooter,
    NavView,
    ElButton,
    ElIcon
  },
  name: 'MainView',
  setup() {
    const isCollapse = ref<boolean>(true);
    const btn_icon = ref<string>('el-icon-s-unfold');
    const isShowDrawer = ref<boolean>(false);
    const navMobail = ref<string>();

    let isMobail: boolean;
    
    const showMenu = function() {
      if(!isMobail) {
        // pc
        isCollapse.value = !isCollapse.value;
        btn_icon.value = isCollapse.value ? 'el-icon-s-unfold' : 'el-icon-s-fold';
      } else {
        // mobail
        isShowDrawer.value = !isShowDrawer.value;
      }
    }

    // 监听屏幕变化
    const onresize = () => {
      const { width } = window.screen;

      if( width > 999 ) {
        // pc
        isMobail = false;
        navMobail.value = '';
      } else {
        // mobail
        isMobail = true;
        isCollapse.value = true;
        navMobail.value = 'nav-mobail';
      }
    }
    
    window.onresize = throttle(onresize, 500);
    // 首次进入或刷新的时候先执行一次
    onresize();

    return { 
      showMenu,
      btn_icon,
      navMobail,
      isShowDrawer,
      isCollapse
    };
  }
});
</script>

<style lang='scss' scoped>
.wapper {
  display: flex;

  .drawer-bg {
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: .3;
    top: 0;
    position: absolute;
    z-index: 998;
  }

  .nav-view {
    height: 100vh;
  }

  .nav-mobail {
    position: absolute;
    transition: all 0.5s;
    z-index: 999;
  }

  .aside-view {
    width: 100%;
    height: 100vh;
    // display: flex;
    // flex-direction: column;
    overflow: hidden;
    position: relative;

    .header-view {
      width: 100%;
      height: 50px;
      background-color: #28527a;
      position: absolute;

      .el-button--medium {
        padding: 0 !important;
        height: inherit !important;
        width: 40px;
        font-size: 1.8rem !important;
        vertical-align: middle;
      }
    }

    .main-view {
      background-color: #edffec;
      padding-top: 50px;
      height: 100%;
      overflow: scroll;
      overflow-x: hidden;
    }
  }
}
</style>